

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>select dir</title>
        <script src="./vue.js"></script>
        <script>
            M = {}
        </script>
    </head>
    <style>
    body {
          font-family: Menlo, Consolas, monospace;
          color: #444;
        }
        .item {
          cursor: pointer;
        }
        .bold {
          font-weight: bold;
        }
        ul {
          padding-left: 13px;
          line-height: 1.5em;
          list-style-type:none;
        }
        img{
            width: 15px;
            height: 15px;
        }
        #box{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        #left{
            width:25%;
            height:10%;
            float:left;
        }

        #right{
            float:right;
            width:75%;
            height:10000px;
        }

       iframe {
        width:100%;
           height:10000px;
       }
    </style>
<body>


   
<div id="box">
    <div id="left">
      <ul id="demo">
        <item
          class="item"
          :model="treeData">
        </item>
      </ul>
    </div>
    <div id="right">
    </div>
</div>
</body>
   

<!-- item template -->
<script type="text/x-template" id="item-template">
  <li v-if="M_dis_root_path==''||model.value.startsWith(M_dis_root_path) || model.value=='/'">
    <div  :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
      <img :src="isFolder ? 'https://ming-bucket-01.oss-cn-beijing.aliyuncs.com/static/img/folder.png':'https://ming-bucket-01.oss-cn-beijing.aliyuncs.com/static/img/file.png'"/>
         {{model.name}}
    </div>

    <ul v-show="open" v-if="isFolder">      
      <item   class="item"
        v-for="model in model.children"
        :model="model">
      </item>
    </ul>
  </li>
</script>






<script>

function getQueryString(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  decodeURIComponent(r[2]); return "";
}


M_root_path="";
datajsonPath=getQueryString("i")||'https://minglie.gitee.io/ming_api_mock_plugins/mi_gitee_page/output.json'
M_dis_root_path=getQueryString("r")||""

Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object
  },
  data: function () {
    return {
      open: false,
      M_dis_root_path:M_dis_root_path
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
          this.open = !this.open
      }else
      {
         let file=this.model.value;
         mingload(file)
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      // this.model.children.push({
      //   name: 'new stuff'
      // })
    },
    openFolder:function(){

    }
  }
})

/**
json 格式
{"name":"/static","value":"/static","children":[{"name":"App.jsx","value":"/static/App.jsx"}]}
 */

function mingload(content){
          console.log(content)
          document.querySelector("#right").innerHTML=`
          <a href="${M_root_path+content}" target="_blank">${M_root_path+content}</a> |||||
          <a href="${datajsonPath}" target="_blank">${datajsonPath}</a>
          <iframe src='${M_root_path+content}' >`
   
}



fetch(datajsonPath, {
    method: 'GET',
        mode: 'cors'
}).then(u=>u.json()).then((u)=>{
  u.M_dis_root_path=M_dis_root_path;
  M_root_path=u.name;
  var demo = new Vue({
    el: '#demo',
    data: {
      treeData: u
    }
  })
});






mingload("https://www.baidu.com/")

    </script>

   
</html>